<template>
	<view class="container">
		<uni-nav-bar class="ch-nav" height="88rpx" backgroundColor="#FFFFFF" leftWidth="180rpx" rightWidth="180rpx" color="#333333" :fixed="true" :padding="false" @clickLeft="$goBack(1)" @clickRight="$CHS.goAbout('growth')">
			<template slot="left">
				<image class="left" src="@/public/images/public/dhl_fhjt.png" mode="aspectFit"></image>
			</template>
			<text class="title">会员中心</text>
			<template slot="right">
				<text class="text-primary">会员权益</text>
			</template>
		</uni-nav-bar>
		<view class="body bottom-ios flex-c" v-if="growthRule">
			<view class="swiper flex-c">
				<swiper class="swiper-box" :current="current" :autoplay="false" :circular="false" @change="swiperChange">
					<swiper-item v-for="(item, index) in swiperList" :key="index">
						<view class="swiper-item flex-c" :id="item.ruleTitle">
							<view class="top flex-c">
								<text class="title text-large">会员等级：{{item.ruleTitle}}</text>
								<text class="info text-mini" v-if="index == levelIndex">{{nextLevel ? '距下个等级' + (ruleValue - user.growthvalue) + '成长值' : '您已升到顶级啦'}}</text>
								<text class="info text-mini" v-else></text>
							</view>
							<view class="center flex-c">
								<text class="text-mini">当前成长值</text>
								<view class="progress-div">
									<view class="progress-bg"></view>
									<view class="progress-actvie" :style="{width: progress + '%'}" v-if="index == levelIndex"></view>
									<view class="progress-actvie" style="width:100%" v-else></view>
								</view>
								<view class="progress-text flex-r ac jsb">
									<view class="left">
										<text class="text-secondary text-bold">{{user.growthvalue}}</text>
										<text class="text-mini" v-if="growthRule[index+1]">/{{growthRule[index+1].ruleValue}}</text>
										<text class="text-mini" v-else>/{{growthRule[index].ruleValue}}</text>
									</view>
									<text class="text-mini">{{index < levelIndex ? growthRule[index+1].ruleTitle : nextLevel}}</text>
								</view>
							</view>
							<!-- <text class="bottom text-mini">*最终解释权归平台所有</text> -->
						</view>
					</swiper-item>
				</swiper>
			</view>
			<view class="rights first flex-c" v-if="receiveCoupons[current]">
				<text class="text-large">当前会员权益</text>
				<view class="rights-body flex-r ac jsb bg-img" v-if="receiveCoupons[current][0].awardType == 1">
					<view class="rights-detail flex-c">
						<text class="text-regular">{{receiveCoupons[current][0].description}}{{receiveCoupons[current][0].awardValue > 1 ? 'x'+receiveCoupons[current][0].awardValue+'张':''}}</text>
						<text class="text-small">{{current == 0 ? receiveCoupons[current][0].title : '会员升级福利'}}</text>
					</view>
					<view class="rights-btn">
						<button type="default" @tap="userReceiveCoupons()" v-if="! receiveCoupons[current][0].isReceive"></button>
						<button type="default" class="noactive" v-else></button>
					</view>
				</view>
				<view class="rights-body flex-r ac jsb bg-img" v-else>
					<view class="rights-detail flex-c">
						<text class="text-regular">{{'赠送'+receiveCoupons[current][0].awardValue+'彩虹豆'}}</text>
						<text class="text-small">会员升级福利</text>
					</view>
					<view class="rights-btn">
						<button type="default" @tap="userReceiveBeans(receiveCoupons[current][0].awardValue)" v-if="! receiveCoupons[current][0].isReceive"></button>
						<button type="default" class="noactive" v-else></button>
					</view>
				</view>
			</view>
			<view class="growth flex-c">
				<text class="text-large">成长值优势</text>
				<scroll-view scroll-x="true" :scroll-into-view="'LV'+current" :scroll-with-animation="true">
					<view class="growth-body flex-r ac">
						<view class="growth-item flex-c ac" 
							v-for="(item, index) in growthRule" 
							:key="item.id+index" 
							:id="'LV'+index" 
							:class="{'active': index <= levelIndex}" 
							@tap="swiperChange({detail:{current:index}})"
						>
							<view class="list-item flex-c ac">
								<view class="item-body flex-c ac" v-if="item.awardType == 1">
									<image class="icon" v-if="index <= levelIndex" src="@/public/images/user/yhq-ys.png" mode="aspectFit"></image>
									<image class="icon" v-else src="@/public/images/user/yhq_h-ys.png" mode="aspectFit"></image>
									<text class="info text-small text-hidden">{{item.title}}x{{item.awardValue}}</text>
									<text class="title text-secondary">赠送优惠券</text>
								</view>
								<view class="item-body flex-c ac" v-else>
									<image class="icon" v-if="index <= levelIndex" src="@/public/images/user/chd-ys.png" mode="aspectFit"></image>
									<image class="icon" v-else src="@/public/images/user/chd_h-ys.png" mode="aspectFit"></image>
									<text class="info text-small text-hidden">彩虹豆x{{item.awardValue}}</text>
									<text class="title text-secondary">赠送彩虹豆</text>
								</view>
								<text class="item-level mt20 text-secondary">· {{item.ruleTitle}} ·</text>
								<view class="item-status mt20 flex-r ac jc">
									<text class="text-mini">{{index <= levelIndex ? '已激活' : '待激活'}}</text>
								</view>
							</view>
							<view class="status-bar"></view>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="rules flex-c">
				<view class="rules-head flex-r">
					<text class="text-large">成长攻略</text>
					<text class="text-small color-grey">（如何获取成长值）</text>
				</view>
				<view class="rules-body flex-r ac">
					<image class="rules-icon" src="@/public/images/user/cz-ys.png" mode="aspectFit"></image>
					<view class="rules-detail flex-c">
						<text class="title text-regular">充值</text>
						<text class="info text-small">1元=1成长值</text>
					</view>
					<button class="primary-btn" type="primary"  @tap="$CHS.goRecharge()">充值</button>
				</view>
				<view class="rules-body mt20 signin flex-r" v-if="signRule">
					<image class="rules-icon" src="@/public/images/user/qd-ys.png" mode="aspectFit"></image>
					<view class="rules-detail flex-c">
						<text class="title text-regular">每日签到</text>
						<text class="info text-small">每日签到奖励{{signRule[0].ruleValue}}成长值，\n{{signRule[signRule.length-1].ruleDes}}。</text>
					</view>
					<button class="primary-btn" type="primary" @tap="goSignIn">去签到</button>
				</view>
			</view>
		</view>
		<view class="full-screen" v-if="showToast">
			<view class="success flex-c">
				<view class="content flex-c">
					<image class="bgimg" src="@/public/images/user/lqcg_tc.png" mode="aspectFit"></image>
					<view class="info flex-c">
						<image src="@/public/images/user/lqcg_z.png" mode="aspectFit"></image>
						<view class="color-grey">
							恭喜你，会员福利领取成功
						</view>
						<button class="btn-default" @tap="closeToast">朕知道了</button>
					</view>
				</view>
				<view class="close flex-c" @tap="closeToast">
					<image src="@/public/images/user/qx_x.png" mode="aspectFit"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				signRule: null,
				growthRule: null,
				awardRule: null,
				receiveCoupons: [],
				
				ruleValue: 1000,
				nextLevel: 'LV2',
				awardLevel: 1,
				current: 0,

				showToast: false,
				navBorder: false
			}
		},
		computed: {
			user() {
				return this.$store.state.user
			},
			progress() {
				if(!this.nextLevel){
					return 100
				}
				return ( this.user.growthvalue / this.ruleValue ) * 100
			},
			levelIndex() {
				if(this.growthRule){
					let index = this.growthRule.findIndex(item => item.ruleValue > this.user.growthvalue)
					if(index > -1){
						return index - 1
					}else{
						return this.growthRule.length - 1
					}
				}else{
					return 0
				}
			},
			swiperList() {
				if(this.growthRule){
					return this.growthRule.slice(0, this.levelIndex+1)
				}else{
					return []
				}
			}
		},
		onLoad() {
			this.getUserGrowthRule()
			this.getUserAwardRule()
			this.getUserSignRule()
		},
		onPageScroll(e) {
			if(e.scrollTop > 10){
				this.navBorder = true
			}else{
				this.navBorder = false
			}
		},
		methods: {
			//获取用户成长规则
			getUserGrowthRule() {
				let growthrule = sessionStorage.getItem('growthrule')
				if(growthrule){
					this.growthRule = JSON.parse(growthrule)
					this.$nextTick(()=>{
						this.current = this.levelIndex
						this.getNextLevelValue()
						this.getReceiveCoupon(this.levelIndex)
					})
					return
				}
				this.$http.get({
					url: '/api/appUser/queryAppRuleRows',
					data: {
						type: 'growth',
						userId: this.user.userId
					},
				}).then(data => {
					//console.log(data.result);
					if(data.success){
						this.growthRule = data.result
						sessionStorage.setItem('growthrule', JSON.stringify(data.result))
						this.$nextTick(()=>{
							this.current = this.levelIndex
							this.getNextLevelValue()
							this.getReceiveCoupon(this.levelIndex)
						})
					}else{
						console.log(data.message)
						uni.showToast({
							title: data.message,
							icon: 'none'
						})
					}
				}).catch((err) => {
					console.log(err)
				})
			},
			//获取用户下一级成长值
			getNextLevelValue(){
				if(this.growthRule){
					if(this.levelIndex == this.growthRule.length-1){
						this.ruleValue = this.growthRule[this.levelIndex].ruleValue
						this.nextLevel = null
					}else{
						let rule = this.growthRule.find(item => item.ruleValue > this.user.growthvalue)
						this.ruleValue = rule.ruleValue
						this.nextLevel = rule.ruleTitle
					}
					console.log(this.nextLevel);
				}
			},
			//领取优惠券
			userReceiveCoupons(){
				let sourceFrom = ''
				let couponIds = ''
				let data = this.receiveCoupons[this.current] || []
				sourceFrom = 'pt_award_' + this.growthRule[this.current].ruleTitle.toString()
				data.forEach( (item, index) => {
					if(!item.isReceive){
						if(index != data.length-1){
							couponIds = couponIds + item.awardCouponId + ','
						}else{
							couponIds = couponIds + item.awardCouponId
						}
					}
				})
				if(couponIds){
					if(this.isReceiveing){
						return
					}
					this.isReceiveing = true
					this.$http.post({
						url: '/api/appUser/receiveCouponsByUserId',
						data: {
							couponIds,
							sourceFrom,
							userId: this.user.userId
						},
					}).then(data => {
						console.log(data);
						if(data.success){
							uni.showToast({
								title: '领取成功！',
								icon: 'success'
							})
							this.showToast = true
							this.getReceiveCoupon(this.current)
						}else{
							uni.showToast({
								title: data.message || '领取失败，请稍后重试',
								icon: 'none'
							})
						}
					}).catch((err) => {
						console.log(err)
						uni.showToast({
							title: data.message || '请求失败，请稍后重试',
							icon: 'none'
						})
					}).finally(()=>{
						this.isReceiveing = false
					})
				}
			},
			//用户领取彩虹豆
			userReceiveBeans(bean) {
				if(this.isReceiveing){
					return
				}
				this.isReceiveing = true
				this.$http.post({
					url: '/api/appUser/drawBeanByLevel',
					data: {
						bean,
						source: 'pt_award_' + this.growthRule[this.current].ruleTitle.toString(),
						userId: this.user.userId
					},
				}).then(data => {
					console.log(data);
					if(data.success){
						uni.showToast({
							title: '领取成功！',
							icon: 'success'
						})
						this.showToast = true
						this.getReceiveCoupon(this.current)
						this.$store.dispatch('updateUserinfo')
					}else{
						console.log(data.message)
						uni.showToast({
							title: data.message || '领取失败！',
							icon: 'none'
						})
					}
				}).catch((err) => {
					console.log(err)
				}).finally(()=>{
					this.isReceiveing = false
				})
			},
			//查询用户待领取优惠券(等级奖励)
			getReceiveCoupon(current) {
				this.$http.get({
					url: '/api/appUser/queryReceiveRecommendByUserId',
					data: {
						level: 'pt_award_' + this.growthRule[current].ruleTitle.toString(),
						userId: this.user.userId
					},
				}).then(data => {
					console.log(data);
					if(data.success && data.result){
						this.$set(this.receiveCoupons, current, data.result)
					}else{
						this.$set(this.receiveCoupons, current, null)
					}
				}).catch((err) => {
					console.log(err)
				})
			},
			//获取用户奖励规则
			getUserAwardRule() {
				let awardRule = sessionStorage.getItem('awardrule')
				if(awardRule){
					this.awardRule = JSON.parse(awardRule)
					return
				}
				this.$http.get({
					url: '/api/appUser/queryAppRuleRows',
					data: {
						type: 'award',
						userId: this.user.userId
					},
				}).then(data => {
					console.log(data.result);
					if(data.success){
						this.awardRule = data.result
						sessionStorage.setItem('awardrule', JSON.stringify(data.result))
					}else{
						console.log(data.message)
					}
				}).catch((err) => {
					console.log(err)
				})
			},
			//获取签到规则
			getUserSignRule() {
				let signRule = sessionStorage.getItem('signrule')
				if(signRule){
					this.signRule = JSON.parse(signRule)
					return
				}
				this.$http.get({
					url: '/api/appUser/queryAppRuleRows',
					data: {
						type: 'sign',
						userId: this.user.userId
					},
				}).then(data => {
					console.log(data.result);
					if(data.success){
						this.signRule = data.result
						sessionStorage.setItem('signrule', JSON.stringify(data.result))
					}else{
						console.log(data.message)
					}
				}).catch((err) => {
					console.log(err)
				})
			},
			//进入签到
			goSignIn(){
				let signTimes = this.user.signTimes
				let signStatus = this.user.signStatus
				this.$Router.push({ name: 'usersignin', params: {signTimes, signStatus}})
			},
			//关闭领取成功提示
			closeToast() {
				this.showToast = false
			},
			//切换等级
			swiperChange(e){
				if(e.detail.current <= this.levelIndex){
					this.current = e.detail.current
					if(!this.receiveCoupons[this.current]){
						this.getReceiveCoupon(this.current)
					}
				}else{
					uni.showToast({
						title: '您的成长值不达标',
						icon: 'none'
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.container{
		padding: 0;
		.ch-nav{
			.text-primary{
				margin-right: 20rpx;
			}
		}
		.text-large{
			font-weight: 500;
		}
	}
	.swiper{
		width: 100%;
		z-index: 1;
		.swiper-box {
			height: 300rpx;
			background: #051333;
			.swiper-item{
				margin: 20rpx 20rpx 0;
				width: 710rpx;
				height: 280rpx;
				background-size: 100% 100%;
				background-repeat: no-repeat;
				box-sizing: border-box;
				.top{
					padding: 50rpx 30rpx 0;
					.title{
						font-weight: 800;
					}
					.info{
						margin-top: 16rpx;
						min-height: 20rpx;
					}
				}
				.center{
					margin: 28rpx 0 0 30rpx;
					width: 360rpx;
					.progress-div{
						position: relative;
						margin: 15rpx 0;
						.progress-bg{
							width: 100%;
							height: 8rpx;
							border-radius: 4rpx;
						}
						.progress-actvie{
							height: 8rpx;
							border-radius: 4rpx;
							background: #FFFFFF;
							position: absolute;
							top: 0;
							left: 0;
						}
					}
				}
				.bottom{
					align-self: flex-end;
					margin: 15rpx 20rpx 0 0;
				}
			}
			#LV1{
				background-image: url("~@/public/images/user/lv1_bg-ys.png");
				color: #993300;
				.progress-bg{
					background: #993300;
				}
				.bottom{
					color: #CC967A;
				}
			}
			#LV2{
				background-image: url("~@/public/images/user/lv2_bg-ys.png");
				color: #2E364C;
				.progress-bg{
					background: #2E364C;
				}
				.bottom{
					color: #A1A5B3;
				}
			}
			#LV3{
				background-image: url("~@/public/images/user/lv3_bg-ys.png");
				color: #4D3900;
				.progress-bg{
					background: #4D3900;
				}
				.bottom{
					color: #B39C59;
				}
			}
			#LV4{
				background-image: url("~@/public/images/user/lv4_bg-ys.png");
				color: #006C80;
				.progress-bg{
					background: #006C80;
				}
				.bottom{
					color: #66BBCC;
				}
			}
			#LV5{
				background-image: url("~@/public/images/user/lv5_bg-ys.png");
				color: #003C80;
				.progress-bg{
					background: #003C80;
				}
				.bottom{
					color: #6696CC;
				}
			}
			#LV6{
				background-image: url("~@/public/images/user/lv6_bg-ys.png");
				color: #220080;
				.progress-bg{
					background: #220080;
				}
				.bottom{
					color: #8166CC;
				}
			}
			#LV7{
				background-image: url("~@/public/images/user/lv7_bg-ys.png");
				color: #B30000;
				.progress-bg{
					background: #B30000;
				}
				.bottom{
					color: #E67373;
				}
			}
		}
	}
	.rights{
		background: #FFFFFF;
		margin-top: -6rpx;
		margin-bottom: 20rpx;
		padding: 40rpx 20rpx;
		z-index: 2;
		.rights-body{
			margin-top: 30rpx;
			background-image: url("~@/public/images/user/qy_bg.png");
			background-size: 100% 100%;
			background-repeat: no-repeat;
			width: 710rpx;
			height: 180rpx;
			padding: 0 30rpx;
			box-sizing: border-box;
			.rights-detail{
				max-width: 415rpx;
				.text-regular{
					font-weight: 500;
					line-height: 42rpx;
				}
				.text-small{
					color: #666666;
					margin-top: 15rpx;
				}
			}
			.rights-btn{
				button{
					width: 160rpx;
					height: 60rpx;
					background-image: url('~@/public/images/user/ljlq-ys.png');
					background-size: 100%;
					border-radius: 30rpx;
					font-size: 24rpx;
					color: #FFFFFF;
					padding: 0;
					margin: 0;
					&.noactive{
						background-image: url('~@/public/images/user/ylq-ys.png');
					}
				}
			}
		}
	}
	.growth{
		background: #FFFFFF;
		padding: 40rpx 0;
		margin-bottom: 20rpx;
		.text-large{
			padding: 0 20rpx;
		}
		.growth-body{
			margin-top: 30rpx;
			width: fit-content;
			.growth-item{
				width: 220rpx;
				position: relative;
				.list-item{
					z-index: 2;
					.item-body{
						width: 200rpx;
						height: 200rpx;
						background-image: url("~@/public/images/user/ys_bgh-ys.png");
						background-size: 100% 100%;
						.icon{
							margin-top: 23rpx;
							width: 64rpx;
							height: 64rpx;
						}
						.info{
							margin-top: 9rpx;
							color: #999999;
						}
						.title{
							margin-top: 40rpx;
							color: #666666;
						}
						.text-hidden{
							max-width: 180rpx;
						}
					}
					.item-level{
						font-weight: 500;
						color: #999999;
					}
					.item-status{
						width: 96rpx;
						height: 32rpx;
						background: #E6E6E6;
						border-radius: 16rpx;
						color: #999999;
					}
				}
				.status-bar{
					width: inherit;
					height: 4rpx;
					background: #E6E6E6;
					position: absolute;
					bottom: 14rpx;
				}
				&.active{
					.item-body{
						background-image: url("~@/public/images/user/ys_bg-ys.png");
						.info{
							color: #FF7200;
						}
						.title{
							color: #804400;
						}
					}
					.item-level{
						font-weight: 500;
						color: #804400;
					}
					.item-status{
						background: #FFD400;
						color: #804400;
					}
					.status-bar{
						background: #FFD400;
					}
				}
			}
			.growth-item:first-child{
				width: 230rpx;
				.list-item{
					padding-left: 10rpx;
				}
			}
			.growth-item:last-child{
				width: 230rpx;
				.list-item{
					padding-right: 10rpx;
				}
			}
		}
	}
	.rules{
		margin-bottom: 20rpx;
		background-color: #FFFFFF;
		padding: 40rpx 20rpx;
		.rules-head{
			align-items: flex-end;
			margin-bottom: 30rpx;
		}
		.rules-body{
			background: #F2F5FA;
			border-radius: 10rpx;
			padding: 32rpx 20rpx;
			.rules-icon{
				width: 96rpx;
				height: 96rpx;
				margin-right: 20rpx;
			}
			.rules-detail{
				flex: 2;
				.title{
					font-weight: 500;
				}
				.info{
					margin-top: 20rpx;
					color: #666666;
				}
			}
			&.signin{
				.rules-detail{
					margin-top: 13rpx;
					.info{
						margin-top: 15rpx;
						line-height: 36rpx;
					}
				}
				.primary-btn{
					margin: 18rpx 0;
				}
			}
			.primary-btn{
				width: 160rpx;
				height: 60rpx;
				background: #0055FF;
				border-radius: 30rpx;
				box-sizing: border-box;
				padding: 0;
				margin: 0;
				font-size: 24rpx;
				color: #FFFFFF;
				line-height: 60rpx;
			}
		}
	}
	.full-screen{
		width: 100%;
		z-index: 997;
		.success{
			align-items: center;
			padding: 340rpx 115rpx 0;
			.content{
				align-items: center;
				border-radius: 20rpx;
				position: relative;
				.bgimg{
					width: 520rpx;
					height: 560rpx;
				}
				.info{
					position: absolute;
					top: 78rpx;
					align-items: center;
					image{
						width: 194rpx;
						height: 48rpx;
					}
					.color-grey{
						margin-top: 27rpx;
						font-size: 28rpx;
						line-height: 28rpx;
					}
					.btn-default{
						margin-top: 242rpx;
						width: 320rpx;
						height: 88rpx;
						background: #FFFFFF;
						border: none;
						border-radius: 44rpx;
						font-size: 32rpx;
						color: #0055FF;
						line-height: 88rpx;
					}
				}
			}
			.close{
				align-items: center;
				image{
					width: 80rpx;
					height: 160rpx;
				}
			}
		}
	}
</style>
